<template>
  <div class="footer-nav">
    <mt-tabbar v-model="selected">
      <mt-tab-item id="首页" @click.native="goToIndex">
        <img v-if="!(selected== '首页')" src="../assets/public/home.png" />
        <img v-if="(selected== '首页')" src="../assets/public/home-active.png" />
        首页
      </mt-tab-item>
      <mt-tab-item id="商城" @click.native="goToMall">
        <img v-if="!(selected== '商城')" src="../assets/public/mall.png" />
        <img v-if="(selected== '商城')" src="../assets/public/mall-active.png" />
        商城
      </mt-tab-item>
      <mt-tab-item id="朋友" @click.native="goToFriend">
        <img v-if="!(selected== '朋友')" src="../assets/public/friend.png" />
        <img v-if="(selected== '朋友')" src="../assets/public/friend-active.png" />
        朋友
      </mt-tab-item>
      <mt-tab-item id="我的音乐" @click.native="goToMine">
        <img v-if="!(selected== '我的音乐')" src="../assets/public/music.png" />
        <img v-if="(selected== '我的音乐')" src="../assets/public/music-active.png" />
        我的音乐
      </mt-tab-item>
      <mt-tab-item id="账号" @click.native="goToAccount">
        <img v-if="!(selected== '账号')" src="../assets/public/mine.png" />
        <img v-if="(selected== '账号')" src="../assets/public/mine-active.png" />
        账号
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabItem } from "mint-ui";
export default {
  name: "footer-nav",
  data() {
    return {
      selected: this.titles,
      islogin: true
    };
  },
  props: {
    titles: String
  },
  created() {
    this.getuserinfo();
  },
  methods: {
    getuserinfo() {
      var url = this.$host1 + `home/getPersonalMsg`;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
            } else if (resData.code == 0) {
              // this.$router.push('/login');
              this.islogin = false;
            } else {
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    goToIndex() {
      this.$router.push({ name: "index" });
    },
    goToMall() {
      console.log('mall');
      // if (this.islogin == false) {
      //   // this.$router.push('/login')
      // } else {
      // }
      window.location.href = `https://test.izhixiu.cn/www/met/musicstore/#/`;
    },
    goToFriend() {
      this.$router.push({ name: "friend" });
    },
    goToMine() {
      this.$router.push({ name: "mine" });
    },
    goToAccount() {
      this.$router.push({ name: "account" });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.footer-nav {
  width: 100%;
  img {
    display: block;
  }
  .mint-tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    height: 1rem;
    box-sizing: border-box;
    background-color: #fff;
    img {
      width: auto;
      height: 0.4rem;
      margin: 0 auto;
      //object-fit: cover;
      margin-bottom: 0.09rem;
    }
    .mint-tab-item {
      border-top: 0.01rem solid #e9e9e9;
      font-size: 0.22rem !important;
      .mint-tab-item-label {
        color: blue !important;
        font-size: 0.22rem !important;
        line-height: 0.32rem;
      }
    }
    .is-selected {
      color: #540573;
      background-color: #fff;
      border-top: 0.01rem solid #e9e9e9;
    }
  }
}
</style>
